<template>
  <div class="container" ref="mainCon">
    <!-- <topTitle :titleText="titleText" v-if="!isWhUser()"></topTitle> -->
    <el-tabs
      v-model="activeName"
      type="card"
      @tab-click="handleClick"
      class="commonTab"
    >
      <!--  v-else -->
      <el-tab-pane label="项目历史变更记录" name="first">
        <!-- <companyRegulation></companyRegulation> -->
      </el-tab-pane>
      <el-tab-pane
        label="项目状态变更审核"
        name="second"
        v-if="isShowStatusTab"
      >
        <projectStatusCheck></projectStatusCheck>
      </el-tab-pane>
    </el-tabs>
    <div class="mainCon" v-if="activeName == 'first'">
      <el-row class="searchBox searchInputWidth">
        <el-form :inline="true" :model="filterField">
          <el-col :lg="8" :xl="6">
            <el-form-item label="项目名称" class="row-padding-bottom">
              <el-input
                placeholder="请输入项目名称"
                clearable
                v-model="filterField.projectName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="区域" class="row-padding-bottom">
              <el-cascader
                ref="manageArea"
                v-model="areaId"
                :options="areasOptions"
                @change="getAreaId"
                clearable
                filterable
                :props="{ checkStrictly: true }"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="行业" class="row-padding-bottom">
                <el-select
                  v-model="filterField.industryId"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in industryOptions"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="投资类型" class="row-padding-bottom">
                <el-select
                  v-model="filterField.investment"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in investmentOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="状态变更" class="row-padding-bottom">
                <el-select
                  v-model="filterField.status"
                  filterable
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in statusOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="变更日期" class="row-padding-bottom">
                <timeSelection
                  @getStartTimeValue="getStartTimeValue"
                  @getEndTimeValue="getEndTimeValue"
                ></timeSelection>
              </el-form-item>
            </el-col>
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item>
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>

              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchTable"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
            </el-form-item>
            <!-- <el-form-item>
                        <el-button type="primary" icon="icon iconfont icondaochu" @click="exportExcel" class="commonBtn saveBtn funComBut">导出</el-button>
                    </el-form-item> -->
            <el-form-item>
              <exportBtn
                :dataLen="tableData.length"
                :filterField="filterField"
                :responseType="`get`"
                api="api-p/projectstatus/expand/export"
              ></exportBtn>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableData"
          @sort-change="sortChange"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column prop="projectName" label="项目名称" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.projectName"
                :columnName="'projectName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="change"
            label="状态变更"
            min-width="150"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="creatorName"
            label="变更用户"
            width="230"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.creatorName"
                :columnName="'creatorName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="变更时间"
            sortable="custom"
            min-width="150"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="operateDate"
            label="开工/停工/竣工时间"
            sortable="custom"
            width="200"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="remark"
            label="变更原因说明"
            width="230"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.remark"
                :columnName="'remark'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            label="附件"
            align="left"
            width="80"
            :formatter="formatTd"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-link
                v-if="isShowDetail"
                type="primary"
                @click="getUploadFile(scope.row.id)"
                >查看</el-link
              >
            </template>
          </el-table-column>
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无数据"></emptyTable>
          </div>
        </el-table>
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>

      <!-- <el-dialog title="附件" :visible.sync="uploadContract" :modal-append-to-body="false">
                <div class="uploadBox" v-show="uploadImg.length < 1">暂无附件</div>
                <div>
                    <ul class="clearfix imgStyle">
                        <li class="fl" v-for="(item,index) of uploadImg" :key="index">
                            <el-image style="width: 100px; height: 100px" :src="item.url ? item.url : item.absolutePath " :preview-src-list="srcList" @click="enlargeImg(index)"></el-image>
                        </li>
                    </ul>
                </div>
            </el-dialog> -->
      <contractEnclosureDialog
        v-if="uploadContract"
        dialogTitle="附件"
        :tableData="uploadImg"
        @closeDialog="uploadContract = false"
      ></contractEnclosureDialog>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import scrollTable from '@/mixin/scrollTable.js'
import projectStatusCheck from './projectStatusCheck.vue'
export default {
  name: 'projectChangeRecord',
  mixins: [scrollTable],
  data() {
    return {
      activeName: 'first',
      advanced: false,
      titleText: '项目历史变更记录',
      advanced: false,
      areaId: '',
      requestUrl: 'api-p/projectstatus/expand/list', //表格请求路径
      filterField: {
        projectName: '',
        areaId: '',
        industryId: '',
        investment: '',
        status: '',
        applyUser: '',
        startDate: '',
        endDate: '',
      },
      tableData: [], //表格数据
      loading: true,
      isShow: false,
      isShowDetail: true,
      uploadContract: false,
      uploadImg: [],
      srcList: [],
      oldSrcList: [],
      isShowStatusTab: false,
    }
  },
  computed: {
    ...mapState([
      'investmentOptions',
      'statusOptions',
      'areasOptions',
      'industryOptions',
    ]),
  },
  components: { projectStatusCheck },
  created() {
    this.getAuditConfig()
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData()
    })
  },
  methods: {
    handleClick(tab, event) {
      if (this.activeName == 'first') {
        this.$nextTick(function () {
          this.$refs.pagination.getTableListData()
        })
      } else {
      }
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    //获取选中的区域最后一级id
    getAreaId() {
      let areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },
    getStartTimeValue(val) {
      if (val) {
        this.filterField.startDate = val
      } else {
        this.filterField.startDate = ''
      }
    },
    getEndTimeValue(val) {
      if (val) {
        this.filterField.endDate = val
      } else {
        this.filterField.endDate = ''
      }
    },
    // exportExcel() {
    //     const { projectName, areaId, industryId, investment, status, startDate, endDate, sortField, sort } = this.filterField;
    //     window.location.href =
    //         common.commonApi +
    //         "api-p/projectstatus/expand/export?projectName=" +
    //         projectName +
    //         "&areaId=" +
    //         areaId +
    //         "&industryId=" +
    //         industryId +
    //         "&investment=" +
    //         investment +
    //         "&status=" +
    //         status +
    //         "&startDate=" +
    //         startDate +
    //         "&endDate=" +
    //         endDate +
    //         "&sortField=" +
    //         sortField +
    //         "&sort=" +
    //         sort +
    //         "&access_token=" +
    //         localStorage.getItem("access_token");
    // },
    getTableList(data) {
      this.tableData = data
      this.loading = false
      if (this.tableData.length < 1) {
        this.isShow = true
      }
    },
    searchTable() {
      this.$refs.pagination.getTableListData()
    },
    getUploadFile(id) {
      return this.axios({
        method: 'post',
        url: 'api-p/projectstatus/expand/files',
        data: {
          id,
        },
      })
        .then((response) => {
          if (response.data.hasError) {
            this.$message.error(response.data.errorMsg)
          } else {
            const results = response.data.result
            this.uploadImg = []
            this.srcList = []
            this.oldSrcList = []
            this.uploadContract = true
            this.uploadImg = results.contractFiles
            for (var i = 0; i < this.uploadImg.length; i++) {
              this.srcList.push(this.uploadImg[i].absolutePath)
              this.oldSrcList.push(this.uploadImg[i].absolutePath)
            }
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    enlargeImg(index) {
      this.srcList = this.oldSrcList
      var demo = this.srcList
      var frontArr = demo.slice(0, index)
      var behindArr = demo.slice(index, demo.length)
      var list = behindArr.concat(frontArr)
      this.srcList = list
    },
    getAuditConfig() {
      this.axios({
        method: 'post',
        url: 'api-p/cs/projectstatusauditconfig/getConfig',
      })
        .then(
          (res) => {
            if (!res.data.hasError) {
              var result = res.data.result
              this.isShowStatusTab = result.status == '1' ? true : false
            } else {
              this.$message({
                message: res.data.errorMsg,
                type: 'error',
              })
            }
          },
          (res) => {
            this.$message({
              message: res.data.errorMsg,
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
  },
}
</script>

<style scoped lang="less">
.mainCon {
  top: 198px;
}
@media only screen and (max-width: 1366px) {
  /deep/.searchInputWidth .el-form--inline .el-form-item__label {
    width: 80px;
  }
}
.saveBtn /deep/ .iconfont {
  padding: 0 5px;
  font-size: 14px;
}
</style>
